<template>
  <div style="margin:20px;" class="setTime">
    <el-table
      :data="tableData"
      @cell-click="cellClick"
      border
      style="width: 100%">
      <el-table-column
        prop="editStartTime"
        label="开始时间"
        width="180">
        <template slot-scope="scope">
          <el-time-picker v-show="isShowEdit(scope,'editStartTime')"
                          v-model="scope.row['editStartTime'].timeValue"
                          format="HH:mm:ss"
                          value-format="HH:mm:ss"
                          @blur="noEdit(scope,'editStartTime')"
                          placeholder="选择时间范围">
          </el-time-picker>
          <span v-show="!isShowEdit(scope,'editStartTime')">{{scope.row['editStartTime'].displayValue}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="editUpTime"
        label="上休时间"
        width="180">
        <template slot-scope="scope">
          <el-time-picker v-show="isShowEdit(scope,'editUpTime')"
                          format="HH:mm:ss"
                          is-range
                          range-separator="-"
                          value-format="HH:mm:ss"
                          @blur="noEdit(scope,'editUpTime')"
                          v-model="scope.row['editUpTime'].timeValue"
                          placeholder="上休时间">
          </el-time-picker>
          <span v-show="!isShowEdit(scope,'editUpTime')">{{scope.row['editUpTime'].displayValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="editMiddleTime"
        label="中休时间">
        <template slot-scope="scope">
          <el-time-picker v-show="isShowEdit(scope,'editMiddleTime')"
                          format="HH:mm:ss"
                          value-format="HH:mm:ss"
                          is-range
                          range-separator="-"
                          @blur="noEdit(scope,'editMiddleTime')"
                          v-model="scope.row['editMiddleTime'].timeValue"
                          placeholder="中休时间">
          </el-time-picker>
          <span v-show="!isShowEdit(scope,'editMiddleTime')">{{scope.row['editMiddleTime'].displayValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="editDownTime"
        label="下休时间">
        <template slot-scope="scope">
          <el-time-picker v-show="isShowEdit(scope,'editDownTime')"
                          v-model="scope.row['editDownTime'].timeValue"
                          format="HH:mm:ss"
                          value-format="HH:mm:ss"
                          is-range
                          range-separator="-"
                          @blur="noEdit(scope,'editDownTime')"
                          placeholder="下休时间">
          </el-time-picker>
          <span v-show="!isShowEdit(scope,'editDownTime')">{{scope.row['editDownTime'].displayValue }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="editEndTime"
        label="结束时间">
        <template slot-scope="scope">
          <el-time-picker v-show="isShowEdit(scope,'editEndTime')"
                          v-model="scope.row['editEndTime'].timeValue"
                          format="HH:mm:ss"
                          value-format="HH:mm:ss"
                          @blur="noEdit(scope,'editEndTime')"
                          placeholder="结束时间">
          </el-time-picker>
          <span v-show="!isShowEdit(scope,'editEndTime')">{{scope.row['editEndTime'].displayValue }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { getToken } from '@/utils/auth' // 验权
  export default {
    nameL:'setTime',
    props:['startProduce'],
    data(){
      return{
        tableData: [{
          editStartTime:'',
          editUpTime: '',
          editMiddleTime: '',
          editDownTime: '',
          editEndTime:''
        }],
        displayMap:{
          editStartTime:false,
          editUpTime:false,
          editMiddleTime:false,
          editDownTime:false,
          editEndTime:false
        },

        originMap:{
          editStartTime:"startTime",
          editUpTime:"upTime",
          editMiddleTime:"middleTime",
          editDownTime:"downTime",
          editEndTime:"endTime"
        },

        workId:''
      }
    },

    mounted(){
      let self = this;
      let work = self.$store.state.userInfo.works;
      self.workId = work.workId;
      self.getTimeSetting();
      self.$eventBus.$on("disAllEdit",function () {
        self.disAllEdit();
      })
    },
    methods:{
      getTimeSetting(){
        let self = this;
        self.$http({
          url: "/autoMonitor/work/queryWorks",
          method: "post",
          params:{workId:self.workId}
        }).then(resp => {
          if (resp.success) {
            self.handleTime(resp.result);
            self.tableData = resp.result;
          }
        });
      },

     getApiTableData(){
        return this.tableData[0];
     },
      handleTime(result){
        for(let data of result){
          this.addExtraAttr(data);
          for(let key in data){
            let _d = data[key];
            data[key] = {displayValue:_d,timeValue:_d,edit:false}
            if(this.displayMap.hasOwnProperty(key) && _d.split("-").length == 2){
              let splitD = _d.split("-");
              data[key].timeValue = splitD;
            }
          }
        }
      },
      addExtraAttr(data){
        let displayValue =["editStartTime","editUpTime","editMiddleTime","editDownTime","editEndTime"];
        for(let attr of displayValue){
          if(!data[attr]){
            data[attr] = data[this.originMap[attr]];
          }
        }
      },

      cellClick(row, column, cell, event){
        if(!this.startProduce){
          let property = column.property;
          row[property].edit = true;
        }

      },

      noEdit(scope,attr){
        scope.row[attr]['edit'] = false;
        let timeValue = scope.row[attr].timeValue;
        if(!timeValue){
          scope.row[attr].displayValue = "";
          return;
        }
        if(typeof timeValue != "string"){
          timeValue = timeValue.join("-");
        }
        scope.row[attr].displayValue = timeValue;
        this.updateTime(attr,timeValue);
      },

      updateTime(attr,timeValue) {
        let self = this;
        let param = {
          workId: self.workId,
        };
        param[attr] = timeValue;
        self.$http({
          url: "/autoMonitor/work/updateWorkTime",
          method: "post",
          params: param
        }).then(resp => {
        });
      },

      isShowEdit(scope,attr){
        let show = false;
        let value = scope.row[attr];
        show = value?value['edit']:show;
        return show;
      },

      disAllEdit(){
        for(let data of this.tableData){
          for(let key in data){
            data[key].edit = false;
          }
        }
      }
    },
    watch:{

    }
  }
</script>
<style>
  .el-table td, .el-table th.is-leaf{
    background: rgb(242, 242, 242);
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }

  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #ffffff;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: auto;
  }
  .setTime  .el-table td{
    cursor: pointer;
  }
</style>
